<template>
	<el-form class="form"  :model="form" ref="formRef" :rules="rules" label-width="120px"  size="small">
		<div class="form_box">
		<div class="title">信息</div>
			<el-row>
				<el-col :span="12">
					<el-form-item label="用户名:" prop="userName">
						<el-input v-model="form.userName" placeholder="请填写用户名" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="姓名:" prop="name">
						<el-input v-model="form.name" placeholder="请填写姓名" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="账号:" prop="account">
						<el-input v-model="form.account" placeholder="请填写账号" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="密码:" prop="password">
						<el-input v-model="form.password" placeholder="请填写密码" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="性别:" prop="female">
						<el-select v-model="form.female" filterable>
							<el-option v-for="item in femaleList" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="手机号:" prop="mobile">
						<el-input v-model="form.mobile" placeholder="请填写手机号" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="角色:" prop="roleId">
            <el-select v-model="roleIds" filterable multiple ref="roleRef">
              <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="头像:" prop="portrait">
						<el-input v-model="form.portrait" placeholder="请填写头像" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="微信号:" prop="wechatNum">
						<el-input v-model="form.wechatNum" placeholder="请填写微信号" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="qq:" prop="qq">
						<el-input v-model="form.qq" placeholder="请填写qq" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="备注:" prop="remark">
						<el-input v-model="form.remark" placeholder="请填写备注" ></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="状态:" prop="status">
						<el-select v-model="form.status" filterable>
							<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
		</div>
	</el-form>
</template>
<script>
import global_ from "@/utils/GlobalDict";
import {getSelectValues,getSelectLabels} from "@/utils/datahelper.js";
import { modifySysUserInfo,addSysUserInfo,checkUserNameAndMobile } from "@/api/system/sysUserInfo";

import { sysRoleAllList } from "@/api/system/sysRole.js";
import { sysUserRoleAllList } from "@/api/system/sysUserRole.js";

export default {
	props: {
		dataObj: {
			type: Object,
			default: new Object()
		},
	},
	filters: {
	},
	data(){
		return {
			form:new Object(),
			femaleList:[],
			statusList:[],
			rules:{
				userName:[{required: true, message: '请填写用户名', trigger: 'blur'},],
				name:[{required: true, message: '请填写姓名', trigger: 'blur'},],
				account:[{required: true, message: '请填写账号', trigger: 'blur'},],
				password:[{required: true, message: '请填写密码', trigger: 'blur'},],
				mobile:[{required: true, message: '请填写手机号', trigger: 'blur'},],
//				role:[{required: true, message: '请填写角色', trigger: 'blur'},],
				status:[{required: true, message: '请填写状态', trigger: 'blur'},],
			},
      roleList:[],
      roleIds:[],
      selRoleList:[],
		}
	},
	methods:{
		save(){
			this.$refs['formRef'].validate((valid) => {
				if(valid) {
					this.doSave();
				}else{
					return null;
				}
			});
		},
		async doSave(){
		  var checkParams = {};
      checkParams.id = this.form.id;
      checkParams.userName = this.form.userName;
      checkParams.mobile = this.form.mobile;
      var result = 0;
		  await checkUserNameAndMobile(checkParams).then(response =>{
		    result = response.data;
      });
		  if(result==-1){
        this.$alert('用户名已存在', '提示', {
          confirmButtonText: '确定',
          callback: action => {}
        });
        return;
      }else if(result==-2){
        this.$alert('手机号已存在', '提示', {
          confirmButtonText: '确定',
          callback: action => {}
        });
        return;
      }else if(result==-99){
        this.$alert('系统异常', '提示', {
          confirmButtonText: '确定',
          callback: action => {}
        });
        return;
      }

      this.form.roleId = getSelectValues(this.$refs.roleRef,true);
      this.form.role = getSelectLabels(this.$refs.roleRef,true);
      this.form.roleIds = getSelectValues(this.$refs.roleRef,false);
			if(this.form.id){
				modifySysUserInfo(this.form).then(response => {
					this.saveCallBack(response);
				});
			}else{
				addSysUserInfo(this.form).then(response => {
					this.saveCallBack(response);
				});
			}
		},
		saveCallBack(response){
			if(response.data.success){
				this.$notify({
					title: '提示',
					message: '操作成功',
					type: 'success',
					duration: 2000
				})
				this.closeDialog(1)
			}else{
				this.$notify({
					title: '提示',
					message: '操作失败',
					type: 'danger',
					duration: 2000
				})
			}
		},
		closeDialog(reload){
			this.$emit("closeDialog",reload);
		},
	},
	created(){

    sysRoleAllList().then(response => {
      this.roleList=response.data;
    });

    if(this.dataObj.id){
      sysUserRoleAllList({userId:this.dataObj.id}).then(response => {
        this.selRoleList=response.data;
        if(this.selRoleList!=null && this.selRoleList.length>0){
          for(var i=0;i<this.selRoleList.length;i++){
            var selRole = this.selRoleList[i];
            this.roleIds.push(selRole.roleId);
          }
        }
      });
    }


		this.femaleList = global_.elSelectConverter(global_.sex);
		this.statusList = global_.elSelectConverter(global_.status);
		this.form = this.dataObj;
		if(!this.form.status){
      this.form.status = 1;//默认为正常
    }
    this.form.createTime = null;
    this.form.modifyTime = null;
	},
}
</script>
